<template>
	<view class="middle1">
	    <view class="middle-tip">
			已出：
	    </view>
	    <view class="cards">
			<view class="c1" v-for="item in outPool">
				<image :src="'/static/majiang/' + item + '.png'"></image>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: ['deck','outPool'],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
		background-size: cover; /* 图片充满容器 */
	}
	.middle1 {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.middle-tip {
	    height: 50rpx;
	    line-height: 50rpx; /* 让文字垂直居中显示 */
	    font-size: 30rpx;
	}
	.cards {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center; /* 修改为居中对齐 */
	    align-items: center;
	    padding: 0 20rpx;
	    width: 100%;
	    max-width: 700rpx; /* 避免手机屏幕过宽导致布局混乱 */
	    box-sizing: border-box;
		overflow: scroll;
	}
	.c1 {
	    height: 80rpx;
	    width: 50rpx;
	    margin: 9rpx;
	    box-sizing: border-box;
	    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
	}
</style>
